<template>
    <h2 style="text-align: center;">修改角色信息</h2>
    <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="Info"
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
        >
        <!-- 输入框 -->
        <el-form-item label="角色名称" prop="Role_Name">
            <el-input v-model="Info.Role_Name" />
        </el-form-item>
        <!-- 状态单选框 -->
        <el-form-item label="状态" prop="Role_State">
            <el-radio-group v-model="Info.Role_State">
                <el-radio :value="true">启用</el-radio>
                <el-radio :value="false">禁用</el-radio>
            </el-radio-group>
        </el-form-item>
        <!-- 树形结构 -->
        <el-form-item label="权限" prop="Permission_Id">
            <el-tree
                style="max-width: 600px"
                :data="InfoPermission"
                ref="treeRef"
                show-checkbox
                node-key="id"
                v-model="Info. Permission_Id"
                />
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
            修改角色信息
        </el-button>
        <el-button @click="resetForm(ruleFormRef)" style="margin-right: 10px;">重置</el-button>
        <a href="/ShowPermission">返回列表</a>
        </el-form-item>
    </el-form>
</template>
  
<script lang="ts" setup>
    import { reactive, ref ,onMounted} from 'vue'
    import type { ComponentSize, ElTree, FormInstance, FormRules } from 'element-plus'
    import axios from 'axios'
    import { ElMessage } from 'element-plus'
    import { useRouter ,useRoute} from 'vue-router'

    const router=useRouter();
    const route=useRoute();

    const formSize = ref<ComponentSize>('default')
    const ruleFormRef = ref<FormInstance>()
    //修改响应式数据
    const Info = ref({
        Role_Id:route.params.id,
        Role_Name: '',
        Role_State: true,
        Permission_Id:[],
    })
    //通过ref引用ElTree的实例，可以通过treeRef.value来获取实例
    const treeRef=ref<InstanceType<typeof ElTree>>();

     //生命周期钩子函数
    onMounted(()=>{
        ShowPermissionInfo();//加载权限信息
        GetRolePerInfo();//角色信息反填
        GetPermissionInfo();//获取权限信息
    })
    const GetPermissionInfo=()=>{
        axios.get("https://localhost:44377/api/User/GetPermissionInfo?id="+route.params.id)
        .then(res=>{
            Info.value.Permission_Id=res.data.Data
            alert(Info.value.Permission_Id)
            //通过树形组件中的方法设置节点为为选中状态
            treeRef.value!.setCheckedKeys(Info.value.Permission_Id,true);
        })
    }
    //角色信息反填
    const GetRolePerInfo=()=>{
        //获取角色信息
        axios.get("https://localhost:44377/api/User/GetRolePerInfo?id="+route.params.id)
        .then(res=>{
            Info.value=res.data.Data
        })       
    }
    const locationOptions = ['Home', 'Company', 'School']
    //验证
    const rules = reactive<FormRules>({
        Role_Name: [
            { required: true, message: '角色名称不能为空！', trigger: 'blur' },
        ],
    })
    //按钮
    const submitForm = async (formEl: FormInstance | undefined) => {
        if (!formEl) return
        await formEl.validate((valid, fields) => {
            if (valid) {
            console.log('数据效验成功，请执行添加操作!')
            //获取权限编号
            var perid=treeRef.value?.getCheckedKeys(false);
            axios.put("https://localhost:44377/api/User/UpdRolePermission",Info.value,
                {
                    params:{
                        perList:perid?.toString(),
                    }
                }
            )
            .then(res=>{
                if(res.data.Data==-1)
                {
                    ElMessage.error("角色名称已存在，请重新输入！")
                    return;
                }
                else if(res.data.Data>0)
                {
                    ElMessage.success("角色信息修改成功")
                    router.push("/ShowPermission");//跳转到显示页面
                }
                else
                {
                    ElMessage.error("角色信息修改失败")
                }
            })
            } else {
            console.log('数据参数有错误，请检查!', fields)
            }
        })
    }
    //重置
    const resetForm = (formEl: FormInstance | undefined) => {
        if (!formEl) return
        formEl.resetFields()
    }

    //-----------------------------树形结构---------------------------------//

    //权限响应式数据
    const InfoPermission=ref([])
   
    //加载权限信息
    const ShowPermissionInfo=()=>{
        axios.get("https://localhost:44377/api/User/ShowPermission?Pid=0")
        .then(res=>{
            InfoPermission.value=res.data.Data
        })
    }

</script>